/* ======================================= */
/* PATIENCE SOLITAIRE - VOLLEDIGE CSS      */
/* ======================================= */

/* SCOPED VARIABELEN - alleen voor patience card */
.patience-card {
  --patience-card-bg: #1a1c1e;
  --patience-secondary-bg: #2d2f31;
  --patience-border-color: #3f4245;
  --patience-text-primary: #ffffff;
  --patience-text-muted: #a0a0a0;
  --patience-overlay-medium: rgba(0, 0, 0, 0.2);
  --patience-overlay-dark: rgba(0, 0, 0, 0.4);
  --patience-accent-green: #10b981;
  --patience-accent-blue: #3b82f6;
  --patience-accent-orange: #f97316;
  
  /* Desktop afmetingen */
  --patience-card-width: 85px;
  --patience-card-height: 120px;
  --patience-tableau-gap: 12px;
}

/* Responsiviteit voor smartphones */
@media (max-width: 768px) {
  .patience-card {
    --patience-card-width: 9vw;
    --patience-card-height: 20vw;
    --patience-tableau-gap: 1vw;
  }
}

.patience-card {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(145deg, var(--patience-card-bg) 0%, var(--patience-secondary-bg) 100%);
  border: 1px solid var(--patience-border-color);
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: var(--patience-text-primary);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.patience-card * {
  box-sizing: border-box;
}

/* Header & Stats */
.patience-header {
  margin-bottom: 15px;
}

.patience-card h1 {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  text-align: center;
}

.patience-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.patience-button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.patience-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.1s, opacity 0.2s;
}

.patience-btn-primary:active {
  transform: scale(0.95);
}

.patience-btn-secondary {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.1s, opacity 0.2s;
}

.patience-btn-secondary:active:not(:disabled) {
  transform: scale(0.95);
}

.patience-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.patience-stats {
  display: flex;
  gap: 8px;
}

.patience-stat {
  background: var(--patience-overlay-medium);
  padding: 4px 10px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid var(--patience-border-color);
  min-width: 60px;
}

.patience-stat-label {
  display: block;
  font-size: 0.6rem;
  color: var(--patience-text-muted);
  text-transform: uppercase;
}

.patience-stat-value {
  font-family: monospace;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Game Board */
.patience-game {
  background: #065f46; 
  border-radius: 10px;
  padding: 15px 10px;
  min-height: 550px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
  position: relative;
}

.patience-top-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.patience-left {
  display: flex;
  gap: 10px;
}

/* Piles */
.patience-pile {
  width: var(--patience-card-width);
  height: var(--patience-card-height);
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.2);
  position: relative;
}

.patience-stock {
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Waste Pile */
.patience-waste {
  width: calc(var(--patience-card-width) + 40px) !important;
  border: none !important;
  display: flex !important;
}

.patience-waste .patience-playing-card {
  position: absolute;
}

.patience-waste .patience-playing-card:nth-last-child(3) { transform: translateX(0px); }
.patience-waste .patience-playing-card:nth-last-child(2) { transform: translateX(20px); }
.patience-waste .patience-playing-card:nth-last-child(1) { transform: translateX(40px); }

/* Foundations */
.patience-foundations {
  display: flex;
  gap: 6px;
}

.patience-foundation-icon {
  font-size: 1.5rem;
  opacity: 0.15;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Tableau */
.patience-tableau {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: var(--patience-tableau-gap) !important;
}

.patience-column {
  min-height: 400px;
  border: none;
  position: relative;
}

/* Playing Cards */
.patience-playing-card {
  width: var(--patience-card-width);
  height: var(--patience-card-height);
  background: white;
  border-radius: 4px;
  position: absolute;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  cursor: grab;
  user-select: none;
}

.patience-playing-card.red { color: #e11d48; }
.patience-playing-card.black { color: #1e293b; }

.patience-playing-card.face-down {
  background: #1e40af;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.1) 5px, rgba(255,255,255,0.1) 10px);
  border: 1px solid white;
}

/* Kaart Inhoud */
.card-corner {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
}

.card-corner.top-left {
  top: 5px;
  left: 5px;
}

.card-corner.bottom-right {
  bottom: 5px;
  right: 5px;
  transform: rotate(180deg);
}

.card-center {
  font-size: 2.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.patience-card-back {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.2);
}

.patience-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: #ffffff;
  color: #065f46;
  padding: 30px 50px;
  border-radius: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 10px 50px rgba(0,0,0,0.6);
  z-index: 5000;
  display: none;
  opacity: 0;
  border: 5px solid #10b981;
}

.patience-feedback.visible {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Kleine schermen correcties */
@media (max-width: 480px) {
  .card-corner { font-size: 0.8rem; }
  .card-center { font-size: 1.5rem; }
  .patience-game { min-height: 400px; }
  .patience-controls { 
    flex-direction: column;
    align-items: stretch;
  }
  .patience-button-group {
    justify-content: center;
  }
  .patience-stats {
    justify-content: center;
  }
}